import React from "react";
import Link from "next/link";
import { useRouter } from "next/router";

import styles from "./index.module.css";

interface NavListProps {
  href: string;
  children: string;
}

function NavLink({ href, children }: NavListProps) {
  const router = useRouter();
  // 判断当前路由路径是否和href相等，相等匹配就需要高亮
  // console.log(router.pathname); // 当前地址
  // console.log(router.asPath); // 对应路由路径

  return (
    <Link href={href}>
      <a className={router.pathname === href ? styles["router-link-active"] : styles["router-link"]}>{children}</a>
    </Link>
  );
}

export default NavLink;
